<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script src="jquery-3.5.1.min.js"></script>
    <!-- HTML结构 -->
    <style>
        .highlight {
            color: #dd1144;
            background-color: #ffd351;
        }
    </style>

    <div id="test-highlight-css">
        <ul>
            <li class="py"><span>Python</span></li>
            <li class="js"><span>JavaScript</span></li>
            <li class="sw"><span>Swift</span></li>
            <li class="hk"><span>Haskell</span></li>
        </ul>
    </div>
    <script>
        //分别用css()方法和addClass()方法高亮显示JavaScript：

        $('#test-highlight-css li.js span').css('background-color', '#ffd351');
        $('#test-highlight-css li.js span').html();
        //var a1 = $('#test-highlight-css li.js span').text();

        //sppend
        // var adde = document.createElement("li");
        // adde.innerHTML = '<span>添加</span>';
        // adde.className = 'adde';
        // var ul1 = $('#test-highlight-css ul ');
        // ul1.append(adde);
        // var ul2 = $('#test-highlight-css li.adde span');
        // ul2.css('background-color', '#ffd351');
        // ul2.css('font-size',20,);


        //修改h1的样式
        //css()
        // var h1 = $('#test-highlight-css li.js span');
        //隐藏节点
        // h1.hide();

        //显示节点
        // h1.show();


        // h1.html('<span style="color: red">JavaScript</span>')
        // h1.css('background-color','pink')
        // //addClass() 添加html类
        // h1.addClass('js3').css('color','red');

        
        //在test-highlight-css ul中添加一个class，背景颜色为blue
        var h2 = $('#test-highlight-css ul');
        h2.addClass('js2').css('background-color','blue');        
        
        

    </script>
</body>

</html>